<script setup lang="ts">
import type { QuestionItem, QuestionItemSize } from '#/types/question';

interface Props {
  question: QuestionItem;
  size?: QuestionItemSize;
}

withDefaults(defineProps<Props>(), {
  size: 'medium'
});

const emit = defineEmits<{
  click: [question: QuestionItem];
}>();

const sizeClasses = {
  small: 'w-6 h-6 text-xs',
  medium: 'w-[26px] h-[20px] ',
  large: 'w-10 h-10 text-base'
};
</script>

<template>
  <div :class="[
    'question-item',
    `question-${question.status}`,
    sizeClasses[size]
  ]" @click="emit('click', question)">
    {{ question.index }}
  </div>
</template>

<style scoped>
@import './question-status.css';
</style>
